<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="no-js" lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Duka Market - Clean, Minimal E-commerce HTML5 Template</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- CSS here -->
    <link rel="stylesheet" href="static/css/preloader.css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" />
    <link rel="stylesheet" href="static/css/meanmenu.css" />
    <link rel="stylesheet" href="static/css/animate.css" />
    <link rel="stylesheet" href="static/css/owl-carousel.css" />
    <link rel="stylesheet" href="static/css/swiper-bundle.css" />
    <link rel="stylesheet" href="static/css/backtotop.css" />
    <link rel="stylesheet" href="static/css/ui-range-slider.css" />
    <link rel="stylesheet" href="static/css/magnific-popup.css" />
    <link rel="stylesheet" href="static/css/nice-select.css" />
    <link rel="stylesheet" href="static/css/flaticon.css" />
    <link rel="stylesheet" href="static/css/font-awesome-pro.css" />
    <link rel="stylesheet" href="static/css/default.css" />
    <link rel="stylesheet" href="static/css/style.css" />
  </head>
  <body>
    <!--[if lte IE 9]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="https://browsehappy.com/">upgrade your browser</a> to improve
        your experience and security.
      </p>
    <![endif]-->

    <!-- preloader start -->
    <div id="loading">
      <div id="loading-center">
        <div id="loading-center-absolute">
          <svg viewbox="0 0 58 58" id="mustard" class="product">
            <g>
              <path
                style="fill: #ed7161"
                d="M39.869,58H18.131C16.954,58,16,57.046,16,55.869V12.621C16,11.726,16.726,11,17.621,11h22.757
                    C41.274,11,42,11.726,42,12.621v43.248C42,57.046,41.046,58,39.869,58z"
              ></path>
              <polygon
                style="fill: #d13834"
                points="35,11 23,11 27.615,0 30.385,0 	"
              ></polygon>
              <rect
                x="16"
                y="16"
                style="fill: #d75a4a"
                width="26"
                height="2"
              ></rect>
              <rect
                x="20"
                y="11"
                style="fill: #d75a4a"
                width="2"
                height="6"
              ></rect>
              <rect
                x="25"
                y="11"
                style="fill: #d75a4a"
                width="2"
                height="6"
              ></rect>
              <rect
                x="30"
                y="11"
                style="fill: #d75a4a"
                width="2"
                height="6"
              ></rect>
              <rect
                x="36"
                y="11"
                style="fill: #d75a4a"
                width="2"
                height="6"
              ></rect>
              <circle style="fill: #d13834" cx="29" cy="36" r="10"></circle>
            </g>
          </svg>
          <svg viewbox="0 0 49.818 49.818" id="meat" class="product">
            <g>
              <path
                style="fill: #994530"
                d="M0.953,38.891c0,0,3.184,6.921,11.405,9.64c1.827,0.604,3.751,0.751,5.667,0.922
                        c7.866,0.703,26.714-0.971,31.066-18.976c1.367-5.656,0.76-11.612-1.429-17.003C44.51,5.711,37.447-4.233,22.831,2.427
                        c-8.328,3.795-7.696,10.279-5.913,14.787c2.157,5.456-2.243,11.081-8.06,10.316C1.669,26.584-1.825,30.904,0.953,38.891z"
              ></path>
              <g>
                <path
                  style="fill: #d75a4a"
                  d="M4.69,37.18c0.402,0.785,3.058,5.552,9.111,7.554c1.335,0.441,2.863,0.577,4.482,0.72l0.282,0.025
                            c0.818,0.073,1.698,0.11,2.617,0.11c18.18,0,22.854-11.218,24.02-16.041c1.134-4.693,0.706-9.703-1.235-14.488
                            C41.049,7.874,36.856,4.229,31.506,4.229c-2.21,0-4.683,0.615-7.349,1.83c-2.992,1.364-6.676,3.921-4.13,10.36
                            c1.284,3.25,0.912,6.746-1.023,9.591c-2.17,3.191-6.002,4.901-9.895,4.39c-0.493-0.065-0.966-0.099-1.404-0.099
                            c-1.077,0-2.502,0.198-3.173,1.143C3.765,32.524,3.823,34.609,4.69,37.18z"
                ></path>
                <path
                  style="fill: #c64940"
                  d="M21.184,46.589c-0.948,0-1.858-0.038-2.706-0.114l-0.283-0.025
                            c-1.674-0.147-3.257-0.287-4.706-0.767c-6.376-2.108-9.188-7.073-9.688-8.047l-0.058-0.137c-0.984-2.917-0.993-5.273-0.026-6.635
                            c0.912-1.285,2.89-1.807,5.524-1.456c3.537,0.466,6.959-1.054,8.936-3.961c1.746-2.565,2.082-5.723,0.921-8.661
                            c-3.189-8.065,2.707-10.754,4.645-11.638c9.68-4.407,16.81-1.155,21.152,9.535c2.021,4.981,2.464,10.202,1.28,15.099
                            C44.953,34.836,40.073,46.589,21.184,46.589z M5.613,36.787c0.401,0.758,2.936,5.155,8.503,6.997
                            c1.229,0.406,2.699,0.536,4.256,0.673l0.284,0.025c0.788,0.07,1.639,0.106,2.527,0.106c17.469,0,21.938-10.683,23.048-15.276
                            c1.084-4.487,0.672-9.286-1.19-13.877C40.29,8.663,36.409,5.229,31.506,5.229c-2.067,0-4.4,0.585-6.934,1.74
                            c-3.02,1.376-5.81,3.532-3.615,9.083c1.408,3.563,0.998,7.398-1.126,10.521c-2.404,3.534-6.563,5.386-10.852,4.818
                            c-1.793-0.236-3.197,0.019-3.632,0.632C4.912,32.636,4.756,34.207,5.613,36.787z"
                ></path>
              </g>
              <g>
                <circle
                  style="fill: #e6e6e6"
                  cx="32.455"
                  cy="12.779"
                  r="4"
                ></circle>
                <path
                  style="fill: #7a3726"
                  d="M32.455,17.779c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S35.212,17.779,32.455,17.779z
                            M32.455,9.779c-1.654,0-3,1.346-3,3s1.346,3,3,3s3-1.346,3-3S34.109,9.779,32.455,9.779z"
                ></path>
              </g>
              <path
                style="fill: #c64940"
                d="M25.617,45.684l-1.941-0.479c0.435-1.761-1.063-3.216-3.446-4.859
                        c-2.875-1.984-4.817-5.117-5.327-8.595c-0.186-1.266-0.425-2.285-0.428-2.295l1.922-0.548c0.01,0.028,1.09,3.104,3.978,4.314
                        c2.094,0.877,4.667,0.598,7.648-0.832c11.578-5.554,17.102-2.646,17.332-2.52l-0.967,1.752c-0.04-0.021-4.97-2.48-15.5,2.57
                        c-3.53,1.694-6.662,1.984-9.312,0.863c-0.801-0.339-1.49-0.779-2.078-1.265c0.769,1.974,2.11,3.695,3.867,4.907
                        C23.149,39.931,26.472,42.222,25.617,45.684z"
              ></path>
              <path
                style="fill: #c64940"
                d="M27.074,27.586c-5.37,0-7.605-3.694-7.633-3.74l1.727-1.01l-0.863,0.505l0.859-0.511
                        c0.108,0.179,2.714,4.335,9.738,2.105c1.54-0.794,12.038-6.002,15.619-2.289l-1.439,1.389c-1.979-2.052-9.229,0.576-13.332,2.714
                        l-0.154,0.064C29.892,27.364,28.389,27.586,27.074,27.586z"
              ></path>
            </g>
          </svg>
          <svg viewbox="0 0 49 49" id="soda" class="product">
            <g>
              <path
                style="fill: #e22f37"
                d="M9.5,27V5.918c0-1.362,0.829-2.587,2.094-3.093l0,0C12.642,2.406,13.5,1.14,13.5,0.011L13.5,0v0
                        l11,0l11,0v0v0.011c0,1.129,0.858,2.395,1.906,2.814l0,0c1.265,0.506,2.094,1.73,2.094,3.093V27v-5v21.082
                        c0,1.362-0.829,2.587-2.094,3.093h0c-1.048,0.419-1.906,1.686-1.906,2.814V49l0,0h-11h-11l0,0l0-0.011
                        c0-1.129-0.858-2.395-1.906-2.814h0c-1.265-0.506-2.094-1.73-2.094-3.093V22"
              ></path>
              <path
                style="fill: #f75b57"
                d="M18.5,7h-5c-0.553,0-1-0.447-1-1s0.447-1,1-1h5c0.553,0,1,0.447,1,1S19.053,7,18.5,7z"
              ></path>
              <path
                style="fill: #f75b57"
                d="M35.5,7h-13c-0.553,0-1-0.447-1-1s0.447-1,1-1h13c0.553,0,1,0.447,1,1S36.053,7,35.5,7z"
              ></path>
              <path
                style="fill: #994530"
                d="M18.5,45h-5c-0.553,0-1-0.447-1-1s0.447-1,1-1h5c0.553,0,1,0.447,1,1S19.053,45,18.5,45z"
              ></path>
              <path
                style="fill: #994530"
                d="M35.5,45h-13c-0.553,0-1-0.447-1-1s0.447-1,1-1h13c0.553,0,1,0.447,1,1S36.053,45,35.5,45z"
              ></path>
              <polygon
                style="fill: #e6e6e6"
                points="39.5,32 9.5,42 9.5,20 39.5,10 	"
              ></polygon>
              <polygon
                style="fill: #f9d70b"
                points="39.5,28 9.5,38 9.5,24 39.5,14 	"
              ></polygon>
            </g>
          </svg>
          <div class="cart-container">
            <svg viewbox="0 0 512 512" id="cart">
              <circle cx="376.8" cy="440" r="55"></circle>
              <circle cx="192" cy="440" r="55"></circle>
              <polygon
                points="128,0 0.8,0 0.8,32 104.8,32 136.8,124.8 170.4,124.8 "
              ></polygon>
              <polygon
                style="fill: #ed7161"
                points="250.4,49.6 224,124.8 411.2,124.8 "
              ></polygon>
              <polygon
                style="fill: #ee5a46"
                points="411.2,124.8 224,124.8 170.4,124.8 136.8,124.8 68,124.8 141.6,361.6 427.2,361.6 
                    511.2,124.8 "
              ></polygon>
              <g>
                <rect
                  x="166.4"
                  y="185.6"
                  style="fill: #ffffff"
                  width="255.2"
                  height="16"
                ></rect>
                <rect
                  x="166.4"
                  y="237.6"
                  style="fill: #ffffff"
                  width="166.4"
                  height="16"
                ></rect>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- preloader end -->

    <!-- back to top start -->
    <div class="progress-wrap">
      <svg
        class="progress-circle svg-content"
        width="100%"
        height="100%"
        viewbox="-1 -1 102 102"
      >
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
      </svg>
    </div>
    <!-- back to top end -->

    <!-- header-start -->
    <header class="header d-blue-bg">
      <div class="header-top">
        <div class="container">
          <div class="header-inner">
            <div class="row align-items-center">
              <div class="col-xl-6 col-lg-7">
                <div class="header-inner-start">
                  <div class="header__currency border-right">
                    <div class="s-name">
                      <span>语言: </span>
                    </div>
                    <select>
                      <option>简体中文</option>
                      <option>English</option>
                    </select>
                  </div>
                  <div class="header__lang border-right">
                    <div class="s-name">
                      <span>货币: </span>
                    </div>
                    <select>
                      <option>人民币</option>
                      <option>美元</option>
                      <option>欧元</option>
                      <option>印度卢比</option>
                      <option>电信发展局</option>
                    </select>
                  </div>
                  <div class="support d-none d-sm-block">
                    <p>
                      需要帮助？
                      <a href="tel:+001123456789">+001 123 456 789</a>
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-xl-6 col-lg-5 d-none d-lg-block">
                <div class="header-inner-end text-md-end">
                  <div class="ovic-menu-wrapper">
                    <ul>
                      <li><a href="about.html">关于我们</a></li>
                      <li><a href="contact.html">订单跟踪</a></li>
                      <li><a href="contact.html">联系我们</a></li>
                      <li><a href="faq.html">常见问题</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-mid">
        <div class="container">
          <div class="heade-mid-inner">
            <div class="row align-items-center">
              <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4">
                <div class="header__info">
                  <div class="logo">
                    <a href="index.html" class="logo-image"
                      ><img src="static/picture/logo1.svg" alt="logo"
                    /></a>
                  </div>
                </div>
              </div>
              <div class="col-xl-5 col-lg-4 d-none d-lg-block">
                <div class="header__search">
                  <form action="#">
                    <div class="header__search-box">
                      <input
                        class="search-input"
                        type="text"
                        placeholder="我要买..."
                      />
                      <button class="button" type="submit">
                        <i class="far fa-search"></i>
                      </button>
                    </div>
                    <div class="header__search-cat">
                      <select>
                        <option>所有类别</option>
                        <option>畅销产品</option>
                        <option>十大优惠</option>
                        <option>新品上市</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                        <option>类别1</option>
                      </select>
                    </div>
                  </form>
                </div>
              </div>
              <div class="col-xl-4 col-lg-5 col-md-8 col-sm-8">
                <div class="header-action">
                  <div class="block-userlink">
                    <a class="icon-link" href="my-account.html">
                      <i class="flaticon-user"></i>
                      <span class="text">
                        <span class="sub">登录</span>
                        我的账户</span
                      >
                    </a>
                  </div>
                  <div class="block-wishlist action">
                    <a class="icon-link" href="wishlist.html">
                      <i class="flaticon-heart"></i>
                      <span class="count">0</span>
                      <span class="text">
                        <span class="sub">最喜欢的</span>
                        我的收藏</span
                      >
                    </a>
                  </div>
                  <div class="block-cart action">
                    <a class="icon-link" href="cart.html">
                      <i class="flaticon-shopping-bag"></i>
                      <span class="count">1</span>
                      <span class="text">
                        <span class="sub">您的购物车:</span>
                        $00.00
                      </span>
                    </a>
                    <div class="cart">
                      <div class="cart__mini">
                        <ul>
                          <li>
                            <div class="cart__title">
                              <h4>您的购物车</h4>
                              <span>(1件商品在您的购物车)</span>
                            </div>
                          </li>
                          <li>
                            <div
                              class="cart__item d-flex justify-content-between align-items-center"
                            >
                              <div class="cart__inner d-flex">
                                <div class="cart__thumb">
                                  <a href="product-details.html">
                                    <img src="static/picture/20.jpg" alt="" />
                                  </a>
                                </div>
                                <div class="cart__details">
                                  <h6>
                                    <a href="product-details.html">
                                      Samsung C49J89: £875, Debenhams Plus
                                    </a>
                                  </h6>
                                  <div class="cart__price">
                                    <span>$255.00</span>
                                  </div>
                                </div>
                              </div>
                              <div class="cart__del">
                                <a href="#"><i class="fal fa-times"></i></a>
                              </div>
                            </div>
                          </li>
                          <li>
                            <div
                              class="cart__sub d-flex justify-content-between align-items-center"
                            >
                              <h6>小计</h6>
                              <span class="cart__sub-total">$255.00</span>
                            </div>
                          </li>
                          <li>
                            <a href="cart.html" class="wc-cart mb-10"
                              >查看购物车</a
                            >
                            <a href="checkout.html" class="wc-checkout">结账</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header__bottom">
        <div class="container">
          <div class="row g-0 align-items-center">
            <div class="col-lg-3">
              <div class="cat__menu-wrapper side-border d-none d-lg-block">
                <div class="cat-toggle">
                  <button type="button" class="cat-toggle-btn cat-toggle-btn-1">
                    <i class="fal fa-bars"></i>按部门购物
                  </button>
                  <div class="cat__menu">
                    <nav id="mobile-menu" style="display: block">
                      <ul>
                        <li>
                          <a href="javascript:;"
                            >所有类别 <i class="far fa-angle-down"></i
                          ></a>
                          <ul class="mega-menu">
                            <li>
                              <a href="javascript:;">主页</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">主页1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">主页2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">主页3</a>
                                </li>
                                <li>
                                  <a href="product-details.html">店铺3栏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">店铺4栏</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">产品页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">产品详情</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V3</a>
                                </li>
                                <li>
                                  <a href="product-details.html">可变产品</a>
                                </li>
                                <li>
                                  <a href="product-details.html">外部产品</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">其他页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">我的收藏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">购物车</a>
                                </li>
                                <li><a href="product-details.html">结账</a></li>
                                <li><a href="product-details.html">登录</a></li>
                                <li><a href="product-details.html">注册</a></li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="javascript:;"
                            >电话和电子产品<i class="far fa-angle-down"></i
                          ></a>
                          <ul class="mega-menu mega-menu-2">
                            <li>
                              <a href="javascript:;">商店页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html"
                                    >标准商店页面</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html"
                                    >商店右侧边栏</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html"
                                    >商店左侧边栏</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html">店铺3栏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">店铺4栏</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">产品页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">产品详情</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V3</a>
                                </li>
                                <li>
                                  <a href="product-details.html">可变产品</a>
                                </li>
                                <li>
                                  <a href="product-details.html">外部产品</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">其他页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">我的收藏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">购物车</a>
                                </li>
                                <li><a href="product-details.html">结账</a></li>
                                <li><a href="product-details.html">登录</a></li>
                                <li><a href="product-details.html">注册</a></li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别3</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别3</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="javascript:;"
                            >畅销产品
                            <span class="cat-label">hot!</span>
                            <i class="far fa-angle-down"></i>
                          </a>
                          <ul class="mega-menu">
                            <li>
                              <a href="javascript:;">商店页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html"
                                    >标准商店页面</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html"
                                    >商店右侧边栏</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html"
                                    >商店左侧边栏</a
                                  >
                                </li>
                                <li>
                                  <a href="product-details.html">店铺3栏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">店铺4栏</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">产品页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">产品详情</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">产品V3</a>
                                </li>
                                <li>
                                  <a href="product-details.html">可变产品</a>
                                </li>
                                <li>
                                  <a href="product-details.html">外部产品</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">其他页面</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">我的收藏</a>
                                </li>
                                <li>
                                  <a href="product-details.html">购物车</a>
                                </li>
                                <li><a href="product-details.html">结账</a></li>
                                <li><a href="product-details.html">登录</a></li>
                                <li><a href="product-details.html">注册</a></li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别3</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a href="javascript:;">手机和平板电脑</a>
                              <ul class="mega-item">
                                <li>
                                  <a href="product-details.html">类别1</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别2</a>
                                </li>
                                <li>
                                  <a href="product-details.html">类别3</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="javascript:;"
                            >前10名
                            <span class="cat-label green">新优惠!</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;"
                            >新品上市 <i class="far fa-angle-down"></i
                          ></a>
                          <ul class="submenu">
                            <li><a href="javascript:;">家用电器</a></li>
                            <li>
                              <a href="javascript:;">技术</a>
                              <ul class="submenu">
                                <li><a href="javascript:;">存储设备</a></li>
                                <li><a href="javascript:;">监视器</a></li>
                                <li><a href="javascript:;">笔记本电脑</a></li>
                              </ul>
                            </li>
                            <li><a href="javascript:;">办公设备</a></li>
                          </ul>
                        </li>
                        <li><a href="javascript:;">电视和音频</a></li>
                        <li><a href="javascript:;">电子与数码</a></li>
                        <li class="d-laptop-none">
                          <a href="javascript:;">时尚服饰</a>
                        </li>
                        <li class="d-laptop-none">
                          <a href="javascript:;">珠宝和手表</a>
                        </li>
                        <li><a href="javascript:;">健康与美容</a></li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-3">
              <div
                class="header__bottom-left d-flex d-xl-block align-items-center"
              >
                <div class="side-menu d-lg-none mr-20">
                  <button
                    type="button"
                    class="side-menu-btn offcanvas-toggle-btn"
                  >
                    <i class="fas fa-bars"></i>
                  </button>
                </div>
                <div class="main-menu d-none d-lg-block">
                  <ul>
                    <li>
                      <a href="index.html"
                        >家 <i class="far fa-angle-down"></i
                      ></a>
                      <ul class="megamenu-1">
                        <li>
                          <a href="index.html">主页</a>
                          <ul class="mega-item">
                            <li><a href="index.html">家一</a></li>
                            <li><a href="index-2.html">家二</a></li>
                            <li><a href="index-3.html">家三</a></li>
                            <li><a href="product-details.html">店铺3栏</a></li>
                            <li><a href="product-details.html">店铺4栏</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="shop.html">产品页面</a>
                          <ul class="mega-item">
                            <li><a href="product-details.html">产品详情</a></li>
                            <li><a href="product-details.html">产品V2</a></li>
                            <li><a href="product-details.html">产品V3</a></li>
                            <li><a href="product-details.html">可变产品</a></li>
                            <li><a href="product-details.html">外部产品</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="shop.html">其他页面</a>
                          <ul class="mega-item">
                            <li><a href="product-details.html">我的收藏</a></li>
                            <li><a href="product-details.html">购物车</a></li>
                            <li><a href="product-details.html">结账</a></li>
                            <li><a href="product-details.html">登录</a></li>
                            <li><a href="product-details.html">注册</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="shop.html">手机和平板电脑</a>
                          <ul class="mega-item">
                            <li><a href="product-details.html">类别1</a></li>
                            <li><a href="product-details.html">类别2</a></li>
                            <li><a href="product-details.html">类别3</a></li>
                            <li><a href="product-details.html">类别4</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="shop.html">手机和平板电脑</a>
                          <ul class="mega-item">
                            <li><a href="product-details.html">类别1</a></li>
                            <li><a href="product-details.html">类别2</a></li>
                            <li><a href="product-details.html">类别3</a></li>
                            <li><a href="product-details.html">类别4</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li><a href="about.html">关于我们</a></li>
                    <li class="has-mega">
                      <a href="shop.html"
                        >店铺<i class="far fa-angle-down"></i
                      ></a>
                      <div class="mega-menu">
                        <div class="container container-mega">
                          <ul>
                            <li>
                              <ul>
                                <li class="title">
                                  <a href="shop.html">店铺布局</a>
                                </li>
                                <li><a href="shop.html">分页</a></li>
                                <li><a href="shop.html">加载更多</a></li>
                                <li><a href="shop.html">无限滚动</a></li>
                                <li><a href="shop.html">侧边栏右侧</a></li>
                                <li><a href="shop.html">侧边栏左侧</a></li>
                              </ul>
                            </li>
                            <li>
                              <ul>
                                <li class="title">
                                  <a href="shop.html">商店页面</a>
                                </li>
                                <li><a href="shop.html">列表显示</a></li>
                                <li><a href="shop.html">小产品</a></li>
                                <li><a href="shop.html">大型产品</a></li>
                                <li><a href="shop.html">商店-3件商品</a></li>
                                <li><a href="shop.html">商店-4件商品</a></li>
                                <li><a href="shop.html">商店-5件商品</a></li>
                              </ul>
                            </li>
                            <li>
                              <ul>
                                <li class="title">
                                  <a href="shop.html">产品布局</a>
                                </li>
                                <li><a href="shop.html">说明粘性</a></li>
                                <li><a href="shop.html">产品轮播</a></li>
                                <li><a href="shop.html">现代画廊</a></li>
                                <li><a href="shop.html">左侧缩略图</a></li>
                                <li><a href="shop.html">右侧缩略图</a></li>
                                <li><a href="shop.html">缩略图底部</a></li>
                              </ul>
                            </li>
                            <li>
                              <ul>
                                <li class="title">
                                  <a href="shop.html">篮球</a>
                                </li>
                                <li><a href="shop.html">东汉普顿羊毛</a></li>
                                <li><a href="shop.html">Faxon帆布低</a></li>
                                <li><a href="shop.html">词的种类</a></li>
                                <li>
                                  <a href="shop.html">Kaoreet Lobortis</a>
                                </li>
                                <li><a href="shop.html">NikeCourt Zoom</a></li>
                                <li>
                                  <a href="shop.html">NikeCourts Air Zoom</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <ul>
                                <li class="title">
                                  <a href="shop.html">篮球</a>
                                </li>
                                <li><a href="shop.html">东汉普顿羊毛</a></li>
                                <li><a href="shop.html">Faxon帆布低</a></li>
                                <li><a href="shop.html">词的种类</a></li>
                                <li>
                                  <a href="shop.html">Kaoreet Lobortis</a>
                                </li>
                                <li><a href="shop.html">NikeCourt Zoom</a></li>
                                <li>
                                  <a href="shop.html">NikeCourts Air Zoom</a>
                                </li>
                              </ul>
                            </li>
                            <li
                              class="mega-image hover-effect"
                              style="
                                background-image: url(static/image/menu-item.jpg);
                              "
                            >
                              <ul>
                                <li>
                                  <a href="shop.html">
                                    <h4>
                                      Top Cameras <br />
                                      Bestseller Products
                                    </h4>
                                    <h5>4K</h5>
                                    <h6>销售到<span>60%折扣</span></h6>
                                  </a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </div>
                        <div class="offer mt-40">
                          <p>
                            <b>优惠</b> 第一个订单的运费可享受30% 的折扣
                            使用代码: <b>DUKA-SALE30</b>
                          </p>
                        </div>
                      </div>
                    </li>
                    <li>
                      <a href="blog.html"
                        >博客 <i class="far fa-angle-down"></i
                      ></a>
                      <ul class="submenu">
                        <li><a href="blog.html">博客</a></li>
                        <li><a href="blog-details.html">博客详情</a></li>
                      </ul>
                    </li>
                    <li>
                      <a href="about.html" class="active"
                        >页面 <i class="far fa-angle-down"></i
                      ></a>
                      <ul class="submenu">
                        <li><a href="my-account.html">我的账户</a></li>
                        <li><a href="faq.html">常见问题页面</a></li>
                        <li><a href="cart.html">购物车</a></li>
                        <li><a href="wishlist.html">我的收藏</a></li>
                        <li><a href="checkout.html">结账</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                        <li><a href="" class="active">404错误</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-9">
              <div class="shopeing-text text-sm-end">
                <p>多花 120 美元即可享受免费送货服务！</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- header-end -->
    <!-- offcanvas area start -->
    <div class="offcanvas__area">
      <div class="offcanvas__wrapper">
        <div class="offcanvas__close">
          <button class="offcanvas__close-btn" id="offcanvas__close-btn">
            <i class="fal fa-times"></i>
          </button>
        </div>
        <div class="offcanvas__content">
          <div class="offcanvas__logo mb-40">
            <a href="index.html">
              <img src="static/picture/logo-white.png" alt="logo" />
            </a>
          </div>
          <div class="offcanvas__search mb-25">
            <form action="#">
              <input type="text" placeholder="What are you searching for?" />
              <button type="submit"><i class="far fa-search"></i></button>
            </form>
          </div>
          <div class="mobile-menu fix"></div>
          <div class="offcanvas__action"></div>
        </div>
      </div>
    </div>
    <!-- offcanvas area end -->
    <div class="body-overlay"></div>
    <!-- offcanvas area end -->

    <main>
      <!-- breadcrumb__area-start -->
      <section class="breadcrumb__area box-plr-75">
        <div class="container">
          <div class="row">
            <div class="col-xxl-12">
              <div class="breadcrumb__wrapper">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <a href="index.html">Home</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                      Shop
                    </li>
                  </ol>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- breadcrumb__area-end -->

      <!-- product-details-start -->
      <div class="product-details">
        <div class="container">
          <div class="row">
            <div class="col-xl-6">
              <div class="product__details-nav d-sm-flex align-items-start">
                <ul
                  class="nav nav-tabs flex-sm-column justify-content-between"
                  id="productThumbTab"
                  role="tablist"
                >
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active"
                      id="thumbOne-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#thumbOne"
                      type="button"
                      role="tab"
                      aria-controls="thumbOne"
                      aria-selected="true"
                    >
                      <img src="static/picture/product-nav-1.jpg" alt="" />
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      id="thumbTwo-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#thumbTwo"
                      type="button"
                      role="tab"
                      aria-controls="thumbTwo"
                      aria-selected="false"
                    >
                      <img src="static/picture/product-nav-2.jpg" alt="" />
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      id="thumbThree-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#thumbThree"
                      type="button"
                      role="tab"
                      aria-controls="thumbThree"
                      aria-selected="false"
                    >
                      <img src="static/picture/product-nav-3.jpg" alt="" />
                    </button>
                  </li>
                </ul>
                <div class="product__details-thumb">
                  <div class="tab-content" id="productThumbContent">
                    <div
                      class="tab-pane fade show active"
                      id="thumbOne"
                      role="tabpanel"
                      aria-labelledby="thumbOne-tab"
                    >
                      <div class="product__details-nav-thumb w-img">
                        <img
                          src="static/picture/product-nav-big-1.jpg"
                          alt=""
                        />
                      </div>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="thumbTwo"
                      role="tabpanel"
                      aria-labelledby="thumbTwo-tab"
                    >
                      <div class="product__details-nav-thumb w-img">
                        <img
                          src="static/picture/product-nav-big-3.jpg"
                          alt=""
                        />
                      </div>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="thumbThree"
                      role="tabpanel"
                      aria-labelledby="thumbThree-tab"
                    >
                      <div class="product__details-nav-thumb w-img">
                        <img
                          src="static/picture/product-nav-big-2.jpg"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-6">
              <div class="product__details-content">
                <h6>Samsung Galaxy A12, 32GB, Black – (Locked)</h6>
                <div class="pd-rating mb-10">
                  <ul class="rating">
                    <li>
                      <a href="#"><i class="fal fa-star"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fal fa-star"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fal fa-star"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fal fa-star"></i></a>
                    </li>
                    <li>
                      <a href="#"><i class="fal fa-star"></i></a>
                    </li>
                  </ul>
                  <span>(01 review)</span>
                  <span><a href="#">Add your review</a></span>
                </div>
                <div class="price mb-10">
                  <span>$216.00</span>
                </div>
                <div class="features-des mb-20 mt-10">
                  <ul>
                    <li>
                      <a href=""
                        ><i class="fas fa-circle"></i> Bass and Stereo Sound.</a
                      >
                    </li>
                    <li>
                      <a href=""
                        ><i class="fas fa-circle"></i> Display with 3088 x 1440
                        pixels resolution.</a
                      >
                    </li>
                    <li>
                      <a href=""
                        ><i class="fas fa-circle"></i> Memory, Storage &amp;
                        SIM: 12GB RAM, 256GB.</a
                      >
                    </li>
                    <li>
                      <a href=""
                        ><i class="fas fa-circle"></i> Androi v10.0 Operating
                        system.</a
                      >
                    </li>
                  </ul>
                </div>
                <div class="product-stock mb-20">
                  <h5>Availability: <span> 940 in stock</span></h5>
                </div>
                <div class="cart-option mb-15">
                  <div class="product-quantity mr-20">
                    <div class="cart-plus-minus p-relative">
                      <input type="text" value="1" />
                      <div class="dec qtybutton">-</div>
                      <div class="inc qtybutton">+</div>
                    </div>
                  </div>
                  <a href="cart.html" class="cart-btn">Add to Cart</a>
                </div>
                <div class="details-meta">
                  <div class="d-meta-left">
                    <div class="dm-item mr-20">
                      <a href="#"
                        ><i class="fal fa-heart"></i>Add to wishlist</a
                      >
                    </div>
                    <div class="dm-item">
                      <a href="#"><i class="fal fa-layer-group"></i>Compare</a>
                    </div>
                  </div>
                  <div class="d-meta-left">
                    <div class="dm-item">
                      <a href="#"><i class="fal fa-share-alt"></i>Share</a>
                    </div>
                  </div>
                </div>
                <div class="product-tag-area mt-15">
                  <div class="product_info">
                    <span class="sku_wrapper">
                      <span class="title">SKU:</span>
                      <span class="sku">DK1002</span>
                    </span>
                    <span class="posted_in">
                      <span class="title">Categories:</span>
                      <a href="#">iPhone</a>
                      <a href="#">Tablets</a>
                    </span>
                    <span class="tagged_as">
                      <span class="title">Tags:</span>
                      <a href="#">Smartphone</a>,
                      <a href="#">Tablets</a>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- product-details-end -->

      <!-- product-details-des-start -->
      <div class="product-details-des mt-40 mb-60">
        <div class="container">
          <div class="row">
            <div class="col-xl-12">
              <div class="product__details-des-tab">
                <ul class="nav nav-tabs" id="productDesTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active"
                      id="des-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#des"
                      type="button"
                      role="tab"
                      aria-controls="des"
                      aria-selected="true"
                    >
                      Description
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      id="aditional-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#aditional"
                      type="button"
                      role="tab"
                      aria-controls="aditional"
                      aria-selected="false"
                    >
                      Additional information
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      id="review-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#review"
                      type="button"
                      role="tab"
                      aria-controls="review"
                      aria-selected="false"
                    >
                      Reviews (1)
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="tab-content" id="prodductDesTaContent">
            <div
              class="tab-pane fade active show"
              id="des"
              role="tabpanel"
              aria-labelledby="des-tab"
            >
              <div class="product__details-des-wrapper">
                <p class="des-text mb-35">
                  Designed by Hans J. Wegner in 1949 as one of the first models
                  created especially for Carl Hansen & Son, and produced since
                  1950. The last of a series of chairs wegner designed based on
                  inspiration from antique Chinese armchairs. The gently rounded
                  top together with the back and seat offers a variety of
                  comfortable seating positions,ideal for both long visits to
                  the dining table and relaxed lounging.
                </p>
                <h6 class="des-sm-title">
                  The standard passage, used since the 1500s.
                </h6>
                <p class="des-text mb-35">
                  A light chair, easy to move around the dining table and about
                  the room. Duis aute irure dolor in reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum
                  dolor sit amet conse ctetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Sit amet
                  conse ctetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut
                  aliquip ex ea commodo consequat.
                </p>
                <div class="features-des-image text-center">
                  <img src="static/picture/product-content-1.jpg" alt="" />
                </div>
                <div class="product-des-section mb-90">
                  <h5 class="des-section mb-30">
                    Get 30% Daily Cash <br />
                    Back with Membership Card.
                  </h5>
                  <p>
                    A new collection of lounge furniture, occasional tables and
                    a stool by Edward Barber & Jay Osgerby offers a relaxed,
                    contemporary attitude toward interior design. The lounge
                    furniture includes four individualized sized sofas, and
                    three complementary ottomans. Available in a range of
                    upholstery fabrics and leathers, the lounge furniture is
                    distinguished by stitched seams that reinforce its
                    architectural profile, softened by the curvature of cushions
                    on each face range of upholstery fabrics and leathers.
                  </p>
                </div>
                <div class="row mb-80">
                  <div class="col-xl-6">
                    <div class="des-single mb-30 text-center">
                      <div class="features-des-image text-center">
                        <img
                          src="static/picture/product-content-2.jpg"
                          alt=""
                        />
                      </div>
                      <h5 class="des-section">
                        Get 30% Daily Cash <br />
                        Back with Membership Card.
                      </h5>
                      <p>
                        Sit amet conse ctetur adipisicing elit, sed do <br />
                        eiusmod tempor incididunt ut labore et dolore magna
                        aliqua.
                      </p>
                    </div>
                  </div>
                  <div class="col-xl-6">
                    <div class="des-single text-center mb-30">
                      <div class="features-des-image">
                        <img
                          src="static/picture/product-content-3.jpg"
                          alt=""
                        />
                      </div>
                      <h5 class="des-section text-center">
                        Get 70% Daily Cash <br />
                        Back with Membership Card.
                      </h5>
                      <p>
                        Sit amet conse ctetur adipisicing elit, sed do <br />
                        eiusmod tempor incididunt ut labore et dolore magna
                        aliqua.
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="features-des-image features-des-image-2 text-center mb-50 w-img"
                >
                  <img src="static/picture/product-content-4.jpg" alt="" />
                </div>
                <div class="des-sm-features">
                  <div class="des-sm-fet text-center mb-30">
                    <img src="static/picture/product-content-5.png" alt="" />
                    <span>Ultra Wide Angle</span>
                  </div>
                  <div class="des-sm-fet text-center mb-30">
                    <img src="static/picture/product-content-6.png" alt="" />
                    <span>Live Focus On</span>
                  </div>
                </div>
                <p class="des-text mb-35">
                  Designed by Puik in 1949 as one of the first models created
                  especially for Carl Hansen & Son, and produced since 1950. The
                  last of a series of chairs wegner designed based on
                  inspiration from antique Chinese armchairs. The gently rounded
                  top together with the back and seat offers a variety of
                  comfortable seating positions,ideal for both long visits to
                  the dining table and relaxed lounging. A light chair easy to
                  move around the dining table and about the room. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla.
                </p>
                <h6 class="des-sm-title">
                  Section 1.10.32 of "de Finibus Bonorum et Malorum", written by
                  Cicero in 45 BC.
                </h6>
                <p class="des-text mb-25">
                  Sound of Marshall, unplugs the chords, and takes the show on
                  the road. Weighing in under 7 pounds, the Kilburn is a
                  lightweight piece of vintage styled engineering. Setting the
                  bar as one of the loudest speakers in its class, the Kilburn
                  is a compact, stout-hearted hero with a well-balanced audio
                  which boasts a clear midrange and extended highs for a sound
                  that is both articulate and pronounced. The analogue knobs
                  allow you to fine tune the controls to your personal
                  preferences while the guitar-influenced leather strap enables
                  easy and stylish travel.
                </p>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="aditional"
              role="tabpanel"
              aria-labelledby="aditional-tab"
            >
              <div class="product__desc-info">
                <ul>
                  <li>
                    <h6>Weight</h6>
                    <span>2 lbs</span>
                  </li>
                  <li>
                    <h6>Dimensions</h6>
                    <span>12 × 16 × 19 in</span>
                  </li>
                  <li>
                    <h6>Product</h6>
                    <span>Purchase this product on rag-bone.com</span>
                  </li>
                  <li>
                    <h6>Color</h6>
                    <span>Gray, Black</span>
                  </li>
                  <li>
                    <h6>Size</h6>
                    <span>S, M, L, XL</span>
                  </li>
                  <li>
                    <h6>Model</h6>
                    <span>Model </span>
                  </li>
                  <li>
                    <h6>Shipping</h6>
                    <span>Standard shipping: $5,95</span>
                  </li>
                  <li>
                    <h6>Care Info</h6>
                    <span>Machine Wash up to 40ºC/86ºF Gentle Cycle</span>
                  </li>
                  <li>
                    <h6>Brand</h6>
                    <span>Kazen</span>
                  </li>
                </ul>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="review"
              role="tabpanel"
              aria-labelledby="review-tab"
            >
              <div class="product__details-review">
                <div class="row">
                  <div class="col-xl-4">
                    <div class="review-rate">
                      <h5>5.00</h5>
                      <div class="review-star">
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-star"></i></a>
                        <a href="#"><i class="fas fa-star"></i></a>
                      </div>
                      <span class="review-count">01 Review</span>
                    </div>
                  </div>
                  <div class="col-xl-8">
                    <div class="review-des-infod">
                      <h6>
                        1 review for "<span
                          >Wireless Bluetooth Over-Ear Headphones</span
                        >"
                      </h6>
                      <div class="review-details-des">
                        <div class="author-image mr-15">
                          <a href="#"
                            ><img src="static/picture/author-sm-1.jpeg" alt=""
                          /></a>
                        </div>
                        <div class="review-details-content">
                          <div class="str-info">
                            <div class="review-star mr-15">
                              <a href="#"><i class="fas fa-star"></i></a>
                              <a href="#"><i class="fas fa-star"></i></a>
                              <a href="#"><i class="fas fa-star"></i></a>
                              <a href="#"><i class="fas fa-star"></i></a>
                              <a href="#"><i class="fas fa-star"></i></a>
                            </div>
                            <div class="add-review-option">
                              <a href="#">Add Review</a>
                            </div>
                          </div>
                          <div class="name-date mb-30">
                            <h6>admin – <span> May 27, 2021</span></h6>
                          </div>
                          <p>
                            A light chair, easy to move around the dining table
                            and about the room. Duis aute irure dolor in
                            reprehenderit in <br />
                            voluptate velit esse cillum dolore eu fugiat nulla
                            pariatur.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xl-12">
                    <div class="product__details-comment">
                      <div class="comment-title mb-20">
                        <h3>Add a review</h3>
                        <p>
                          Your email address will not be published. Required
                          fields are marked *
                        </p>
                      </div>
                      <div class="comment-rating mb-20">
                        <span>Overall ratings</span>
                        <ul>
                          <li>
                            <a href="#"><i class="fas fa-star"></i></a>
                          </li>
                          <li>
                            <a href="#"><i class="fas fa-star"></i></a>
                          </li>
                          <li>
                            <a href="#"><i class="fas fa-star"></i></a>
                          </li>
                          <li>
                            <a href="#"><i class="fas fa-star"></i></a>
                          </li>
                          <li>
                            <a href="#"><i class="fas fa-star"></i></a>
                          </li>
                        </ul>
                      </div>
                      <div class="comment-input-box">
                        <form action="#">
                          <div class="row">
                            <div class="col-xxl-6 col-xl-6">
                              <div class="comment-input">
                                <input type="text" placeholder="Your Name" />
                              </div>
                            </div>
                            <div class="col-xxl-6 col-xl-6">
                              <div class="comment-input">
                                <input type="email" placeholder="Your Email" />
                              </div>
                            </div>
                            <div class="col-xxl-12">
                              <textarea
                                placeholder="Your review"
                                class="comment-input comment-textarea"
                              ></textarea>
                            </div>
                            <div class="col-xxl-12">
                              <div
                                class="comment-agree d-flex align-items-center mb-25"
                              >
                                <div class="form-check">
                                  <input
                                    class="form-check-input"
                                    type="checkbox"
                                    value=""
                                    id="flexCheckDefault"
                                  />
                                  <label
                                    class="form-check-label"
                                    for="flexCheckDefault"
                                  >
                                    Save my name, email, and website in this
                                    browser for the next time I comment.
                                  </label>
                                </div>
                              </div>
                            </div>
                            <div class="col-xxl-12">
                              <div class="comment-submit">
                                <button type="submit" class="cart-btn">
                                  Submit
                                </button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- product-details-des-end -->

      <!-- shop modal start -->
      <div
        class="modal fade"
        id="productModalId"
        tabindex="-1"
        role="dialog"
        aria-hidden="true"
      >
        <div
          class="modal-dialog modal-dialog-centered product__modal"
          role="document"
        >
          <div class="modal-content">
            <div class="product__modal-wrapper p-relative">
              <div class="product__modal-close p-absolute">
                <button data-bs-dismiss="modal">
                  <i class="fal fa-times"></i>
                </button>
              </div>
              <div class="product__modal-inner">
                <div class="row">
                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="product__modal-box">
                      <div class="tab-content" id="modalTabContent">
                        <div
                          class="tab-pane fade show active"
                          id="nav1"
                          role="tabpanel"
                          aria-labelledby="nav1-tab"
                        >
                          <div class="product__modal-img w-img">
                            <img src="static/picture/quick-view-1.jpg" alt="" />
                          </div>
                        </div>
                        <div
                          class="tab-pane fade"
                          id="nav2"
                          role="tabpanel"
                          aria-labelledby="nav2-tab"
                        >
                          <div class="product__modal-img w-img">
                            <img src="static/picture/quick-view-2.jpg" alt="" />
                          </div>
                        </div>
                        <div
                          class="tab-pane fade"
                          id="nav3"
                          role="tabpanel"
                          aria-labelledby="nav3-tab"
                        >
                          <div class="product__modal-img w-img">
                            <img src="static/picture/quick-view-3.jpg" alt="" />
                          </div>
                        </div>
                        <div
                          class="tab-pane fade"
                          id="nav4"
                          role="tabpanel"
                          aria-labelledby="nav4-tab"
                        >
                          <div class="product__modal-img w-img">
                            <img src="static/picture/quick-view-4.jpg" alt="" />
                          </div>
                        </div>
                      </div>
                      <ul class="nav nav-tabs" id="modalTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <button
                            class="nav-link active"
                            id="nav1-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav1"
                            type="button"
                            role="tab"
                            aria-controls="nav1"
                            aria-selected="true"
                          >
                            <img src="static/picture/quick-nav-1.jpg" alt="" />
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button
                            class="nav-link"
                            id="nav2-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav2"
                            type="button"
                            role="tab"
                            aria-controls="nav2"
                            aria-selected="false"
                          >
                            <img src="static/picture/quick-nav-2.jpg" alt="" />
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button
                            class="nav-link"
                            id="nav3-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav3"
                            type="button"
                            role="tab"
                            aria-controls="nav3"
                            aria-selected="false"
                          >
                            <img src="static/picture/quick-nav-3.jpg" alt="" />
                          </button>
                        </li>
                        <li class="nav-item" role="presentation">
                          <button
                            class="nav-link"
                            id="nav4-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav4"
                            type="button"
                            role="tab"
                            aria-controls="nav4"
                            aria-selected="false"
                          >
                            <img src="static/picture/quick-nav-4.jpg" alt="" />
                          </button>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="product__modal-content">
                      <h4>
                        <a href="">Samsung C49J89: £875, Debenhams Plus</a>
                      </h4>
                      <div class="product__review d-sm-flex">
                        <div class="rating rating__shop mb-10 mr-30">
                          <ul>
                            <li>
                              <a href="#"><i class="fal fa-star"></i></a>
                            </li>
                            <li>
                              <a href="#"><i class="fal fa-star"></i></a>
                            </li>
                            <li>
                              <a href="#"><i class="fal fa-star"></i></a>
                            </li>
                            <li>
                              <a href="#"><i class="fal fa-star"></i></a>
                            </li>
                            <li>
                              <a href="#"><i class="fal fa-star"></i></a>
                            </li>
                          </ul>
                        </div>
                        <div class="product__add-review mb-15">
                          <span>01 review</span>
                        </div>
                      </div>
                      <div class="product__price">
                        <span>$109.00 – $307.00</span>
                      </div>
                      <div class="product__modal-des mt-20 mb-15">
                        <ul>
                          <li>
                            <a href="#"
                              ><i class="fas fa-circle"></i> Bass and Stereo
                              Sound.</a
                            >
                          </li>
                          <li>
                            <a href="#"
                              ><i class="fas fa-circle"></i> Display with 3088 x
                              1440 pixels resolution.</a
                            >
                          </li>
                          <li>
                            <a href="#"
                              ><i class="fas fa-circle"></i> Memory, Storage &
                              SIM: 12GB RAM, 256GB.</a
                            >
                          </li>
                          <li>
                            <a href="#"
                              ><i class="fas fa-circle"></i> Androi v10.0
                              Operating system.</a
                            >
                          </li>
                        </ul>
                      </div>
                      <div class="product__stock mb-20">
                        <span class="mr-10">Availability :</span>
                        <span>1795 in stock</span>
                      </div>
                      <div class="product__modal-form">
                        <form action="#">
                          <div
                            class="pro-quan-area d-lg-flex align-items-center"
                          >
                            <div class="product-quantity mr-20 mb-25">
                              <div class="cart-plus-minus p-relative">
                                <input type="text" value="1" />
                              </div>
                            </div>
                            <div class="pro-cart-btn mb-25">
                              <button class="cart-btn" type="submit">
                                Add to cart
                              </button>
                            </div>
                          </div>
                        </form>
                      </div>
                      <div class="product__stock mb-30">
                        <ul>
                          <li>
                            <a href="#">
                              <span class="sku mr-10">SKU:</span>
                              <span
                                >Samsung C49J89: £875, Debenhams Plus</span
                              ></a
                            >
                          </li>
                          <li>
                            <a href="#">
                              <span class="cat mr-10">Categories:</span>
                              <span>iPhone, Tablets</span></a
                            >
                          </li>
                          <li>
                            <a href="#">
                              <span class="tag mr-10">Tags:</span>
                              <span>Smartphone, Tablets</span></a
                            >
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- shop modal end -->
    </main>

    <!-- footer-start -->
    <footer>
      <div class="fotter-area d-dark-bg">
        <div class="footer__top pt-80 pb-15">
          <div class="container">
            <div class="row">
              <div class="col-xl-5 col-lg-4 order-last-md">
                <div class="row">
                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
                    <div class="footer__widget">
                      <div class="footer__widget-title">
                        <h4>客户服务</h4>
                      </div>
                      <div class="footer__widget-content">
                        <div class="footer__link">
                          <ul>
                            <li><a href="faq.html">新客户</a></li>
                            <li><a href="faq.html">如何使用账户</a></li>
                            <li><a href="faq.html">正在下单</a></li>
                            <li><a href="faq.html">支付方式</a></li>
                            <li><a href="faq.html">送货与派送</a></li>
                            <li><a href="faq.html">订单问题</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
                    <div class="footer__widget">
                      <div class="footer__widget-title">
                        <h4>客户服务</h4>
                      </div>
                      <div class="footer__widget-content">
                        <div class="footer__link">
                          <ul>
                            <li><a href="faq.html">帮助中心</a></li>
                            <li><a href="faq.html">联系我们</a></li>
                            <li><a href="faq.html">报告滥用</a></li>
                            <li><a href="faq.html">提交争议</a></li>
                            <li><a href="faq.html">政策与规则</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-7 col-lg-8 order-first-md">
                <div class="footer__top-left">
                  <div class="row">
                    <div class="col-xl-7 col-lg-6 col-md-6 col-sm-6">
                      <div class="row">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                          <div class="footer__widget">
                            <div class="footer__widget-title">
                              <h4>我的账户</h4>
                            </div>
                            <div class="footer__widget-content">
                              <div class="footer__link">
                                <ul>
                                  <li><a href="faq.html">产品支持</a></li>
                                  <li><a href="checkout.html">结账</a></li>
                                  <li><a href="cart.html">购物车</a></li>
                                  <li><a href="wishlist.html">愿望清单</a></li>
                                  <li><a href="faq.html">条款和条件</a></li>
                                  <li><a href="faq.html">兑现券</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                          <div class="footer__widget">
                            <div class="footer__widget-title">
                              <h4>快速链接</h4>
                            </div>
                            <div class="footer__widget-content">
                              <div class="footer__link">
                                <ul>
                                  <li><a href="contact.html">店面位置</a></li>
                                  <li>
                                    <a href="my-account.html">我的账户</a>
                                  </li>
                                  <li><a href="contact.html">订单跟踪</a></li>
                                  <li><a href="faq.html">常见问题</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-xl-5 col-lg-6 col-md-6 col-sm-6">
                      <div class="footer__widget">
                        <div class="footer__widget-title mb-20">
                          <h4>关于商店</h4>
                        </div>
                        <div class="footer__widget-content">
                          <p class="footer-text mb-35">
                            我们的使命宣言是无一例外地为电子行业提供绝对最佳的客户体验
                          </p>
                          <div
                            class="footer__hotline d-flex align-items-center mb-10"
                          >
                            <div class="icon mr-15">
                              <i class="fal fa-headset"></i>
                            </div>
                            <div class="text">
                              <h4>有问题吗? 致电我们 24/7!</h4>
                              <span
                                ><a href="tel:100-123-456-7890"
                                  >(+100) 123 456 7890</a
                                ></span
                              >
                            </div>
                          </div>
                          <div class="footer__info">
                            <ul>
                              <li>
                                <span
                                  >地址:
                                  <a target="_blank" href="javascript:;"
                                    >Walls Street 68, Mahattan, New York, USA</a
                                  ></span
                                >
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer__bottom">
          <div class="container">
            <div class="footer__bottom-content pt-55 pb-45">
              <div class="row">
                <div class="col-xl-12">
                  <div class="footer__links text-center mb-25">
                    <p>
                      <a href="faq.html">网上购物</a>
                      <a href="faq.html">促销</a>
                      <a href="faq.html">我的订单</a>
                      <a href="faq.html">帮助</a>
                      <a href="faq.html">客户服务</a>
                      <a href="faq.html">支持</a>
                      <a href="faq.html">最受欢迎</a>
                      <a href="faq.html">新到货</a>
                      <a href="faq.html">特殊产品 </a>
                      <a href="faq.html">制造商</a>
                      <br />
                      <a href="faq.html">园艺设备</a>
                      <a href="faq.html">动力和手工具 </a>
                      <a href="faq.html">器具和小工具 </a>
                      <a href="faq.html">打印机</a>
                      <a href="faq.html">投影</a>
                      <a href="faq.html">扫描仪</a>
                      <a href="faq.html">商店</a>
                      <a href="faq.html">业务</a>
                    </p>
                  </div>
                  <div class="payment-image text-center mb-25">
                    <a href="contact.html"
                      ><img src="static/picture/payment.png" alt=""
                    /></a>
                  </div>
                  <div class="copy-right-area text-center">
                    <p>
                      Copyright &copy; 2022.Company name All rights reserved.<a
                        target="_blank"
                        href="https://sc.chinaz.com/moban/"
                        >&#x7F51;&#x9875;&#x6A21;&#x677F;</a
                      >
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- footer-end -->

    <!-- JS here -->
    <script src="static/js/jquery.js"></script>
    <script src="static/js/waypoints.js"></script>
    <script src="static/js/bootstrap-bundle.js"></script>
    <script src="static/js/meanmenu.js"></script>
    <script src="static/js/swiper-bundle.js"></script>
    <script src="static/js/tweenmax.js"></script>
    <script src="static/js/owl-carousel.js"></script>
    <script src="static/js/magnific-popup.js"></script>
    <script src="static/js/parallax.js"></script>
    <script src="static/js/backtotop.js"></script>
    <script src="static/js/nice-select.js"></script>
    <script src="static/js/countdown.min.js"></script>
    <script src="static/js/counterup.js"></script>
    <script src="static/js/ui-slider-range.js"></script>
    <script src="static/js/wow.js"></script>
    <script src="static/js/isotope-pkgd.js"></script>
    <script src="static/js/imagesloaded-pkgd.js"></script>
    <script src="static/js/ajax-form.js"></script>
    <script src="static/js/main.js"></script>
  </body>
</html>
